<script setup>
import {ref} from "vue";

let counter = ref(0)

function plus() {
  ++counter.value
}

function minus() {
  --counter.value
}

function add(param) {
  console.log(param);
  counter.value = counter.value + param
}

function subtract(param) {
  console.log(param);
  counter.value = counter.value - param
}

function function2parameter(i, j) {
  console.log(i);
  console.log(j);
}

function functionevent(event) {
  console.log(event);
}
</script>

<template>
  <h2>{{ counter }}</h2>

  <!-- 无参函数可以省略() -->
  <button @click="minus">-</button>
  <button @click="plus">+</button>
  <hr>
  <button @click="minus()">-</button>
  <button @click="plus()">+</button>
  <hr>
  <button @click="subtract(3)">-</button>
  <button @click="add(3)">+</button>

  <!-- 对于只有一个参数的函数，如果省略() 会将事件传入 -->
  <button @click="subtract">-</button>
  <button @click="add">+</button>
  <hr>
  <!-- 对于多个参数来讲，如果传入的参数个数不够，该参数的值会变为 undefined -->
  <button @click="function2parameter(12,34)">2</button>
  <button @click="function2parameter(12)">2</button>
  <button @click="function2parameter()">2</button>
  <!-- 对于多个参数来讲，如果只写函数名，就会将事件作为第一个参数输入，其他的为 undefined -->
  <button @click="function2parameter">2</button>

  <hr>
  <button @click="functionevent">指定传入事件</button>
  <button @click="functionevent()">指定传入事件</button>
  <!-- 手动传入事件 -->
  <button @click="functionevent($event)">指定传入事件</button>
</template>

<style scoped>

</style>